<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>途忆 - 风景日记分享平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        .masonry-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 固定3列横向等宽 */
            gap: 1.5rem;
            padding: 2rem;
        }
        .masonry-grid > div {
            aspect-ratio: 3/4; /* 基础宽高比，实际高度由图片决定 */
            min-height: 200px; /* 最小高度防止内容溢出 */
        }
        .diary-cover {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        @media (max-width: 1024px) {
            .masonry-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 640px) {
            .masonry-grid { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body class="bg-gray-100 font-sans">
    <!-- 顶部导航栏 -->
    <nav class="bg-white shadow-md fixed w-full z-10">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center py-3">
                <a href="/" class="text-2xl font-bold text-blue-600">途忆</a>
                <div class="flex items-center">
                    <a href="/login" class="px-4 py-2 text-gray-600 hover:text-blue-600">登录</a>
                    <a href="/register" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">注册</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 搜索栏 -->
    <div class="container mx-auto pt-24 pb-8 text-center">
        <input type="text"
               placeholder="搜索目的地/旅行经历..."
               class="w-1/2 md:w-1/3 px-4 py-3 rounded-full border focus:outline-none focus:border-blue-600 shadow-md">
    </div>

    <!-- 严格错排的瀑布流布局 -->
    <div class="masonry-grid">
        <!-- 第一行日记卡片（不同纵向高度） -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=600&h=800"
                 alt="稻城亚丁"
                 class="diary-cover">
            <div class="p-4 bg-white">
                <h3 class="text-lg font-bold text-gray-800">稻城亚丁徒步日记</h3>
                <p class="text-gray-600 text-sm mt-2">从成都出发，4天3晚高原徒步，人均花费4500元</p>
                <div class="flex justify-between items-center mt-4">
                    <div class="flex space-x-2">
                        <i class="fas fa-heart text-red-500"></i> <span>236赞</span>
                        <i class="fas fa-share-alt text-blue-500"></i> <span>98分享</span>
                    </div>
                    <a href="/diary/1" class="text-blue-600 font-medium">查看详情</a>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=600&h=600"
                 alt="青海湖日出"
                 class="diary-cover">
            <div class="p-4 bg-white">
                <h3 class="text-lg font-bold text-gray-800">青海湖环湖自驾</h3>
                <p class="text-gray-600 text-sm mt-2">西宁起止6天5晚，详解黑马河日出拍摄攻略</p>
                <div class="flex justify-between items-center mt-4">
                    <div class="flex space-x-2">
                        <i class="fas fa-heart text-red-500"></i> <span>189赞</span>
                        <i class="fas fa-share-alt text-blue-500"></i> <span>72分享</span>
                    </div>
                    <a href="/diary/2" class="text-blue-600 font-medium">查看详情</a>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <img src="https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9?w=600&h=900"
                 alt="梅里雪山日照金山"
                 class="diary-cover">
            <div class="p-4 bg-white">
                <h3 class="text-lg font-bold text-gray-800">雨崩村朝圣之旅</h3>
                <p class="text-gray-600 text-sm mt-2">徒步5天挑战自我，附高反应对实用技巧</p>
                <div class="flex justify-between items-center mt-4">
                    <div class="flex space-x-2">
                        <i class="fas fa-heart text-red-500"></i> <span>312赞</span>
                        <i class="fas fa-share-alt text-blue-500"></i> <span>121分享</span>
                    </div>
                    <a href="/diary/3" class="text-blue-600 font-medium">查看详情</a>
                </div>
            </div>
        </div>

        <!-- 第二行日记卡片（不同纵向高度） -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <img src="https://images.unsplash.com/photo-1550439062-609e15312701?w=600&h=750"
                 alt="新疆喀纳斯"
                 class="diary-cover">
            <div class="p-4 bg-white">
                <h3 class="text-lg font-bold text-gray-800">喀纳斯环线8日游</h3>
                <p class="text-gray-600 text-sm mt-2">乌鲁木齐出发，深度体验北疆秋日童话</p>
                <div class="flex justify-between items-center mt-4">
                    <div class="flex space-x-2">
                        <i class="fas fa-heart text-red-500"></i> <span>287赞</span>
                        <i class="fas fa-share-alt text-blue-500"></i> <span>105分享</span>
                    </div>
                    <a href="/diary/4" class="text-blue-600 font-medium">查看详情</a>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <img src="https://images.unsplash.com/photo-1542231493-8e7e53415bb0?w=600&h=500"
                 alt="桂林漓江"
                 class="diary-cover">
            <div class="p-4 bg-white">
                <h3 class="text-lg font-bold text-gray-800">桂林山水3天2晚</h3>
                <p class="text-gray-600 text-sm mt-2">阳朔骑行+遇龙河漂流，避坑指南请查收</p>
                <div class="flex justify-between items-center mt-4">
                    <div class="flex space-x-2">
                        <i class="fas fa-heart text-red-500"></i> <span>156赞</span>
                        <i class="fas fa-share-alt text-blue-500"></i> <span>63分享</span>
                    </div>
                    <a href="/diary/5" class="text-blue-600 font-medium">查看详情</a>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <img src="https://images.unsplash.com/photo-1512341689857-198e7e2f3ca8?w=600&h=850"
                 alt="西藏纳木错"
                 class="diary-cover">
            <div class="p-4 bg-white">
                <h3 class="text-lg font-bold text-gray-800">纳木错星空拍摄记</h3>
                <p class="text-gray-600 text-sm mt-2">拉萨出发2天1夜，附星空摄影参数设置</p>
                <div class="flex justify-between items-center mt-4">
                    <div class="flex space-x-2">
                        <i class="fas fa-heart text-red-500"></i> <span>358赞</span>
                        <i class="fas fa-share-alt text-blue-500"></i> <span>137分享</span>
                    </div>
                    <a href="/diary/6" class="text-blue-600 font-medium">查看详情</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-white shadow-inner mt-8 p-6 text-center text-gray-600">
        <p>© 2025 途忆旅行 - 分享你的风景故事</p>
    </footer>
</body>
</html>